<template>
<!-- 登录注册 -->
<div class="container w3layouts agileits" style="background-color: green;" >

<div class="login w3layouts agileits" >
    <h2>登 录</h2>
    <form action="#" method="post">
        <input type="text" Name="Userame" placeholder="用户名" v-model="login.user.username">
        <input type="password" Name="Password" placeholder="密码" v-model="login.user.password">
    </form>
    <ul class="tick w3layouts agileits">
        <li>
            <input type="checkbox" id="brand1" v-model="login.rememberlogin">
            <label for="brand1"><span></span>记住我</label>
        </li>
    </ul>
    <div class="send-button w3layouts agileits">
        <form>
            <input type="submit" value="登 录">
        </form>
    </div>
    <a href="#">忘记密码?</a>
    <div v-if="login.othermethods" class="social-icons w3layouts agileits">
        <p>- 其他方式登录 -</p>
        <ul>
            <li class="qq"><a href="#">
            <span class="icons w3layouts agileits"></span>
            <span class="text w3layouts agileits">QQ</span></a></li>
            <li class="weixin w3ls"><a href="#">
            <span class="icons w3layouts"></span>
            <span class="text w3layouts agileits">微信</span></a></li>
            <li class="weibo aits"><a href="#">
            <span class="icons agileits"></span>
            <span class="text w3layouts agileits">微博</span></a></li>
            <div class="clear"> </div>
        </ul>
    </div>
    <div class="clear"></div>
</div>


<div class="register w3layouts agileits" >
    <h2>注 册</h2>
    <form action="#" method="post">
        <input type="text" Name="Name" placeholder="用户名" v-model="register.user.username">
       
        <input type="password" Name="Password" placeholder="密码" v-model="register.user.password">
        <input type="password" Name="Password" placeholder="确认密码" v-model="register.againpassword">
        <input type="text" Name="Phone Number" placeholder="手机号码或邮箱" v-model="register.contact">
    </form>
    <div class="send-button w3layouts agileits">
        <form>
            <input type="submit" value="免费注册">
        </form>
    </div>
    <div class="clear"></div>
</div>

<div class="clear"></div>

</div>
</template>
 
<script>
 
import { mapGetters,mapActions,mapMutations,mapState } from 'vuex';
 import {email_reg,phone_reg} from '@/utils/regexps.js'
export default {
    components:{
 
              },
    data() {
          return {
                login:{
                    user:{
                       username:null,
                       password:null, 
                    },
                    rememberlogin:false,
                    othermethods:false
                },
                register:{
                    user:{
                        username:null,
                        password:null,
                        email:null,
                        phone:null,
                    },
                    againpassword:null,
                    contact:null,
                }
                 }
         },
         
    computed:{

             },
    created() {

              },
    mounted() {

              },
    watch:{
        'register.contact'(nv,ov){
                if(phone_reg.test(nv)){
                this.register.user.email=null;
                    this.register.user.phone=nv;
               }else if(email_reg.test(nv)){
                this.register.user.phone=null
                this.register.user.email=nv
               }else {
              
                this.register.user.email=null;
                this.register.user.phone=null
               }
        }
          },

    beforeCreate(){

                  },
    beforeDestroy() {

                    },
    deactivated() {

                   },
}
</script>
<style scoped src="../../public/css/stylelogin.css">

</style>